<template>
  <d2-container>
    <div class="flex-1 mx-2 card-box">
      <div class="flex-1 py-1 font-s-1 title-box row-ac-sb">
        <div class="ml-2 font-s-2">基本信息</div>
        <div class="font-s-2 mr-2 cp" style="color: #4466AD;" @click="onclickBasic">修改</div>
      </div>
      <div class="flex-1 mx-2 py-5">
        <div class="flex-1 row-ac-fw">
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">店铺名称</div>
            <div class="">{{ formBasic.shop_name }}</div>
          </div>
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">行业类目</div>
            <div class="">{{ formBasic.merchantcategory_name }}</div>
          </div>
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">店铺状态</div>
            <div class="">
              <el-tag v-if="formBasic.audit_status == 1" size="small" type="danger" effect="dark">未审核</el-tag>
              <el-tag v-if="formBasic.audit_status == 2" size="small" type="success" effect="dark">审核通过</el-tag>
              <el-tag v-if="formBasic.audit_status == 3" size="small" type="warning" effect="dark">未通过</el-tag>
            </div>
          </div>
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">保证金</div>
            <div class="">
              <el-tag v-if="formBasic.is_margin == 0" size="small" type="danger" effect="dark">未缴纳</el-tag>
              <el-tag v-if="formBasic.is_margin == 1" size="small" type="success" effect="dark">已缴纳</el-tag>
            </div>
          </div>
          <div class="row-ac font-s-2 item-33" v-if="formBasic.is_margin == 1">
            <div class="t-name mr-2">保证金金额</div>
            <div class="">{{ formBasic.margin_amount }}</div>
          </div>
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">预计销售额</div>
            <div class="">{{ formBasic.estimate_sales | calculateNumFilter }}</div>
          </div>
          <div class="row-ac font-s-2 item-33">
            <div class="t-name mr-2">店铺空间容量</div>
            <div class="">{{ formBasic.space_capacity | calculateFileFilter }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 mx-2 card-box mt-2">
      <div class="flex-1 py-1 font-s-1 title-box">
        <span class="ml-2 font-s-2">店铺人员信息</span>
      </div>
      <div class="flex-1 mx-2 py-5">
        <div class="flex-1 d-f">
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">会员</div>
            <div class="">{{ merDetail.user_name }}</div>
          </div>
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">联系人</div>
            <div class="">{{ merDetail.card_name }}</div>
          </div>
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">联系电话</div>
            <div class="">{{ merDetail.phone_number }}</div>
          </div>
        </div>
        <div class="flex-1 d-f mt-2">
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">身份证号码</div>
            <div class="">{{ merDetail.card_number }}</div>
          </div>
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">身份证正面</div>
            <div class="">
              <el-popover placement="right" trigger="hover"
                v-if="merDetail.cardID_front && merDetail.cardID_front !== ''">
                <el-image slot="reference" style="width: 30px; height: 30px" :src="merDetail.cardID_front"
                  fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="merDetail.cardID_front" fit="contain" />
              </el-popover>
            </div>
          </div>
          <div class="row-ac font-s-2 flex-1">
            <div class="t-name mr-2">身份证反面</div>
            <div class="">
              <el-popover placement="right" trigger="hover"
                v-if="merDetail.cardID_contrary && merDetail.cardID_contrary !== ''">
                <el-image slot="reference" style="width: 30px; height: 30px" :src="merDetail.cardID_contrary"
                  fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="merDetail.cardID_contrary" fit="contain" />
              </el-popover>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 mx-2 card-box mt-2">
      <div class="flex-1 py-1 font-s-1 title-box row-ac-sb">
        <div class="ml-2 font-s-2">主体信息</div>
        <div class="font-s-2 mr-2" style="color: #4466AD;">修改</div>
      </div>
      <div class="flex-1 mx-2 py-5">
        <div class="row-ac font-s-2 flex-1">
          <div class="t-name mr-2">主体类型</div>
          <div class="">企业</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">营业执照注册号</div>
          <div class="">{{ merDetail.license_number }}</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">注册地址</div>
          <div class="">{{ merDetail.license_address }}</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">营业执照</div>
          <div class="">
            <el-popover placement="right" trigger="hover"
              v-if="merDetail.business_license && merDetail.business_license !== ''">
              <el-image slot="reference" style="width: 30px; height: 30px" :src="merDetail.business_license"
                fit="cover" />
              <el-image style="width: 220px; height: 220px" :src="merDetail.business_license" fit="contain" />
            </el-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="flex-1 mx-2 card-box mt-2">
      <div class="flex-1 py-1 font-s-1 title-box row-ac-sb">
        <div class="ml-2 font-s-2">结算信息</div>
        <div class="font-s-2 mr-2" style="color: #4466AD;">修改</div>
      </div>
      <div class="flex-1 mx-2 py-5">
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">银行账号</div>
          <div class="">{{ merDetail.bank_number }}</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">开户银行</div>
          <div class="">{{ merDetail.deposit_bank }}</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">开户账户</div>
          <div class="">{{ merDetail.account_name }}</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">账户类型</div>
          <div class="">对公账户</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">账户类型</div>
          <div class="">即时入账到账户</div>
        </div>
        <div class="row-ac font-s-2 flex-1 mt-3">
          <div class="t-name mr-2">结算费率</div>
          <div class="">{{ merDetail.rate }}</div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogBodyVisible" width="30%" title="修改主体信息">
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    merchantDetailUrl
  } from "@/utils/merchant"
  import {
    calculateNumber
  } from "@/utils/utils"
  export default {
    data() {
      return {
        merDetail: '',
        dialogBodyVisible: false,
        formBasic: {
          shop_name: '',
          merchantcategory_name: '',
          audit_status: '',
          is_margin: '',
          margin_amount: '',
          estimate_sales: '',
          space_capacity: ''
        }
      }
    },
    filters: {
      calculateNumFilter(num) {
        if (num >= 10000) {
          let result = (num / 10000).toFixed(2);
          return `${result}万`;
        } else {
          return num.toString();
        }
      },
      calculateFileFilter(value) {
        if (value === null || value === undefined) {
          return null;
        }
        if (value < 1024) {
          return `${value}B`;
        } else if (value < 1024 * 1024) {
          return `${(value / 1024).toFixed(2)}KB`;
        } else if (value < 1024 * 1024 * 1024) {
          return `${(value / (1024 * 1024)).toFixed(2)}MB`;
        } else {
          return `${(value / (1024 * 1024 * 1024)).toFixed(2)}GB`;
        }
      },
    },
    mounted() {
      if (this.$route.query.merchantId) {
        this.getMerchantId = this.$route.query.merchantId
        this.getMerchantcategoryDetail()
        this.modifyState = true
      } else {
        this.modifyState = false
      }
    },
    methods: {
      getMerchantcategoryDetail() {
        this.$get(merchantDetailUrl + this.getMerchantId + '/').then(res => {
          if (res.data.code == 200) {
            this.merDetail = res.data.data
            console.log(this.merDetail);
            this.formBasic = {
              shop_name: this.merDetail.shop_name,
              merchantcategory_name: this.merDetail.merchantcategory_name,
              audit_status: this.merDetail.audit_status,
              is_margin: this.merDetail.is_margin,
              margin_amount: this.merDetail.margin_amount,
              estimate_sales: this.merDetail.estimate_sales,
              space_capacity: this.merDetail.space_capacity
            }
          }
        })
      },
      onclickBasic(){
        
      }
    }
  }
</script>

<style>
  .card-box {
    border: 1px solid #EEE;
  }

  .title-box {
    background-color: #fafafa;
    border-bottom: 1px solid #EEE;
  }

  .t-name {
    color: #888888;
  }

  .item-33 {
    width: 33.33%;
    margin-bottom: 20px;
  }
</style>
